<template>
	<view class="content">
		<!-- 标题部分 -->
		<view class="login_from_input">
			<view class="form-left">联系人</view>
			<view class="login_from_fun">
				<u--input v-model="formData.lxr" border="none" placeholder="请输入联系人"></u--input>
			</view>
		</view>
		<view class="login_from_input">
			<view class="form-left">联系电话</view>
			<view class="login_from_fun">
				<u--input type="number" maxlength="11" v-model="formData.lxrdh" border="none" placeholder="请输入联系电话"></u--input>
			</view>
		</view>
		<view class="login_from_input">
			<view class="form-left">项目名称</view>
			<view class="login_from_fun">
				<u--input v-model="formData.xmmc" border="none" placeholder="请输入需求名称"></u--input>
			</view>
		</view>
		<view class="login_from_input" @click="openPicker('cyly')">
			<view class="form-left">产业领域</view>
			<view class="login_from_fun">
				<u--input v-model="formData.cylyName" border="none" placeholder="请选择产业领域" disabled disabledColor="#fff"></u--input>
				<!-- <picker style="width: 100%" @change="industryChange" :value="industryIndex" :range-key="'dictLabel'" :range="industryArray">
					<view style="font-size: 28rpx; float: left" class="uni-input">{{ industryArray[industryIndex].dictLabel || '请选择产业领域' }}</view>
				</picker> -->
			</view>
		</view>
		<view class="login_from_input" @click="openPicker('jssp')">
			<view class="form-left">技术水平</view>
			<view class="login_from_fun">
				<u--input v-model="formData.jsspName" border="none" placeholder="请选择技术水平" disabled disabledColor="#fff"></u--input>
				<!-- <picker style="width: 100%" @change="techlevelChange" :value="techlevelIndex" :range-key="'dictLabel'" :range="techlevelArray">
					<view style="font-size: 28rpx; float: left" class="uni-input">{{ techlevelArray[techlevelIndex].dictLabel || '请选择技术水平' }}</view>
				</picker> -->
			</view>
		</view>
		<view class="login_from_input" @click="openPicker('sfzs')">
			<view class="form-left">是否中试</view>
			<view class="login_from_fun">
				<u--input v-model="formData.sfzsName" border="none" placeholder="请选择是否中试" disabled disabledColor="#fff"></u--input>
				<!-- <picker style="width: 100%" @change="yesnoChange" :value="yesnoIndex" :range-key="'dictLabel'" :range="yesnoArray">
					<view style="font-size: 28rpx; float: left" class="uni-input">{{ yesnoArray[yesnoIndex].dictLabel || '请选择是否中试' }}</view>
				</picker> -->
			</view>
		</view>
		<view class="login_from_input" @click="openPicker('hzfs')">
			<view class="form-left">转化方式</view>
			<view class="login_from_fun">
				<u--input v-model="formData.hzfsName" border="none" placeholder="请选择转化方式" disabled disabledColor="#fff"></u--input>
				<!-- <picker style="width: 100%" @change="cooperationChange" :value="cooperatiobnIndex" :range-key="'dictLabel'" :range="cooperationArray">
					<view style="font-size: 28rpx; float: left" class="uni-input">{{ cooperationArray[cooperatiobnIndex].dictLabel || '请选择转化方式' }}</view>
				</picker> -->
			</view>
		</view>
		<view class="login_from_input" @click="openPicker('yjtzgm')">
			<view class="form-left">预计投资规模</view>
			<view class="login_from_fun">
				<u--input v-model="formData.yjtzgmName" border="none" placeholder="请选择预计投资规模" disabled disabledColor="#fff"></u--input>
				<!-- <picker style="width: 100%" @change="tzChange" :value="tzIndex" :range-key="'dictLabel'" :range="tzArray">
					<view style="font-size: 28rpx; float: left" class="uni-input">{{ tzArray[tzIndex].dictLabel || '请选择投资预算' }}</view>
				</picker> -->
			</view>
		</view>
		<view class="login_from_input">
			<view class="form-left">成果持有方</view>
			<view class="login_from_fun">
				<u--input v-model="formData.cgcyfmc" border="none" placeholder="请输入成果持有方名称"></u--input>
			</view>
		</view>
		<view class="login_from_input"  @click="showDateSelect = true">
			<view class="form-left">失效日期</view>
			<view class="login_from_fun">
				<u--input v-model="formData.expirationDate" border="none" placeholder="请选择失效日期" disabled disabledColor="#fff"></u--input>
			</view>
		</view>
		<view class="login_from_input">
			<view class="form-left">成果内容</view>
			<view class="login_from_fun">
				<!-- <input type="text" style="height: 400rpx;  white-space:normal; word-break:break-all; word-warp:break-word;" v-model="formData.description" placeholder="请输入需求描述"> -->
				<u--textarea v-model="formData.cgnrjzms" border="none" placeholder="请输入成果内容"></u--textarea>
			</view>
		</view>
		<view class="login_from_input">
			<view class="form-left">预期经济效益</view>
			<view class="login_from_fun">
				<!-- <input type="text" style="height: 400rpx;  white-space:normal; word-break:break-all; word-warp:break-word;" v-model="formData.description" placeholder="请输入需求描述"> -->
				<u--textarea v-model="formData.yqjjxy" border="none" placeholder="请输入期望经济效益"></u--textarea>
			</view>
		</view>
		<view class="uni-form-item">
			<view v-if="submit == true" style="margin-bottom: 35rpx; background-color: #fff">
				<button type="primary" @click="submitNeeds()">提交</button>
			</view>
			<view v-if="submit != true" style="margin-bottom: 35rpx; background-color: #fff">
				<button type="primary" @click="intelligentMatch()">智能匹配</button>
			</view>
		</view>
		<view v-if="submit != true">
			<view style="text-align: center">匹配结果</view>
			<view v-for="(item, index) in matchList" :key="index">
				<view style="background-color: #fff; border-radius: 2%; padding: 20rpx; margin-top: 8rpx; height: 180rpx">
					<view>需求公司：{{ item.data.companyName }}</view>
					<view style="margin-top: 8rpx">项目名称：{{ item.data.subject }}</view>
					<view style="margin-top: 8rpx">产业领域：{{ formatterIndustry(item.data.industry) }}</view>
					<view style="color: brown; float: left; width: 40%; margin-top: 8rpx">投入资金：{{ getMoney(item.data.money) }}</view>
					<view style="color: #016fb8; float: left; width: 35%; margin-top: 8rpx">匹配度：{{ item.matchRatio }}</view>
					<view>
						<button style="float: right; width: 25%; height: 60rpx; background-color: #016fb8; font-size: 25rpx" type="primary" @click="toggle('center', index)">立即预约</button>
					</view>
					<view style="height: 1rpx; width: 100%; background-color: silver"></view>
				</view>
			</view>
		</view>
		<uni-popup v-if="canlendarShow">
			<tmt-calendar defaultDate="2021-11-03" :point-list="['2022-03-20', '2022-04-01', '2022-04-02', '2022-04-05']" show="canlendarShow" @changeDate="changeDate(e)"></tmt-calendar>
		</uni-popup>
		<u-datetime-picker :show="showDateSelect" v-model="dateTimeValue" mode="date" @confirm="confirm" @cancel="showDateSelect = false"></u-datetime-picker>
		<u-popup :show="showMask" :customStyle="{ padding: '20rpx' }" :round="10" mode="center" @close="closePopup">
			<u--form labelPosition="left" labelWidth="auto" :model="popupForm" :rules="rules" ref="uForm">
				<u-form-item label="预约时间" prop="subscribeTime" borderBottom ref="item1" @click="showDate = true">
					<u--input v-model="popupForm.subscribeTime" disabledColor="#ffffff" disable placeholder="请选择预约时间" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="预约内容" prop="content" borderBottom ref="item1">
					<u--textarea v-model="popupForm.content" placeholder="请输入预约内容" border="none"></u--textarea>
				</u-form-item>
			</u--form>
			<u-button text="预约" type="primary" shape="circle" @click="submitOrder1"></u-button>
		</u-popup>
		<u-datetime-picker :show="showDate" v-model="valueDate" mode="date" @confirm="confirmDate" @cancel="showDate = false"></u-datetime-picker>
		<u-picker :show="showPicker" @cancel="showPicker = false" @confirm="confirmPicker" :columns="columns" keyName="dictLabel"></u-picker>
	</view>
</template>

<script>
import * as mydata from '@/api/system/dict/data.js';
import * as needs from '@/api/cgzh/index.js';
import * as match from '@/api/intelligentMatch.js';

function getDate(type) {
	const date = new Date();

	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();

	if (type === 'start') {
		year = year - 10;
	} else if (type === 'end') {
		year = year + 10;
	}
	month = month > 9 ? month : '0' + month;
	day = day > 9 ? day : '0' + day;

	return `${year}-${month}-${day}`;
}

export default {
	data() {
		return {
			show: false,
			token: '',
			formData: {
				jssp: '', //
				cgcyfmc: '', //成果持有方名称
				yqjjxy: '', //期望经济效益
				hzfs: '', //合作方式
				cyly: '', //产业领域
				lxr: '', //联系人
				yjtzgm: '', //投资金额
				cgnrjzms: '', //需求内容
				lxrdh: '', //联系电话
				xmmc: '', //项目名称
				sfzs: '' //是否中试
			},
			srcs: [],
			execId: 0,
			taskId: '',
			hasDescription: false,
			companyTypeList: [],
			fieldList: [],
			commandTypeList: [{ id: '0', name: '' }],
			imageStyles: {
				width: 64,
				height: 64,
				border: {
					color: '#888888',
					width: 2,
					style: 'dashed',
					radius: '2px'
				}
			},
			canlendarShow: false,
			//需求类型
			typeArray: [],
			//需求类型选中项
			typeIndex: null,
			// //合作类型
			// cooperationArray: [
			// ],
			// //合作类型选中项
			// cooperationIndex: 0,
			//紧急类型
			emergencyArray: [],
			//合作类型选中项
			emergencyIndex: null,
			//紧急类型
			cityArray: [],
			//合作类型选中项
			cityIndex: null,
			//是否列表
			yesnoArray: [],
			//是否选中项
			yesnoIndex: null,
			//产业领域
			industryArray: [],
			//产业领域选中项
			industryIndex: null,
			//合作方式
			cooperationArray: [],
			//合作方式选中项
			cooperatiobnIndex: null,
			//合作方式
			tzArray: [],
			//合作方式选中项
			tzIndex: null,
			//技术水平
			techlevelArray: [],
			//技术水平选中项
			techlevelIndex: null,
			//截止时间选择相关
			date: getDate({
				format: true
			}),
			startDate: getDate('start'),
			endDate: getDate('end'),
			submit: true,
			matchList: [],
			// 日期选择器显隐
			showDateSelect: false,
			dateTimeValue: '',
			showMask: false,
			showDate: false,
			valueDate: '',
			rules: {
				subscribeTime: { required: true, message: '请选择预约时间', trigger: ['blur', 'change'] },
				content: { required: true, message: '请输入预约内容', trigger: ['blur', 'change'] }
			},
			popupForm: {
				subscribeTime: '',
				content: ''
			},
			resData: {},
			currentIndex: '',
			orderInfo: {},
			showPicker: false,
			columns: [
				[
					{
						dictLabel: '雪月夜',
						// 其他属性值
						id: 2021
						// ...
					},
					{
						dictLabel: '冷夜雨',
						id: 804
					}
				]
			],
			activePicker:'',
		};
	},
	onLoad() {
		this.getCityList();
		this.getUser();
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		confirmPicker(arr){
			console.log(arr);
			this.formData[this.activePicker] = arr.value[0].dictValue
			this.formData[this.activePicker+'Name'] = arr.value[0].dictLabel
			this.showPicker = false
		},
		openPicker(flag){
			this.columns = []
			if(flag==='cyly'){
				this.columns.push(this.industryArray)
			}
			if(flag==='jssp'){
				this.columns.push(this.techlevelArray)
			}
			if(flag==='sfzs'){
				this.columns.push(this.yesnoArray)
			}
			if(flag==='hzfs'){
				this.columns.push(this.cooperationArray)
			}
			if(flag==='yjtzgm'){
				this.columns.push(this.tzArray)
			}
			this.activePicker = flag
			this.showPicker = true
		},
		// 预约提交按钮
		submitOrder1() {
			this.$refs.uForm
				.validate()
				.then((res) => {
					let currentData = this.matchList[this.currentIndex];
					this.popupForm.type = 11;
					this.popupForm.needId = this.resData.id;
					this.popupForm.title = currentData.subject; //数据标题
					this.popupForm.dataId = currentData.id;
					this.popupForm.contact = currentData.lxr;
					this.popupForm.telphone = currentData.phone;
					this.popupForm.receiverId = currentData.memberId;
					needs.needLog(this.popupForm).then((res) => {
						console.log(res);
						if (res.code === 200) {
							uni.$u.toast('预约成功');
							this.showMask = false;
						}
					});
				})
				.catch((errors) => {
					uni.$u.toast('校验失败');
				});
		},
		formatterIndustry(value) {
			return this.industryArray.find((item) => item.dictValue === value).dictLabel;
		},
		confirm(value) {
			let date = new Date(value.value);
			let YYYY = date.getFullYear();
			let MM = String(date.getMonth() + 1).padStart(2, 0);
			let DD = String(date.getDate()).padStart(2, 0);
			this.formData.expirationDate = `${YYYY}-${MM}-${DD}`;
			this.showDateSelect = false;
		},
		confirmDate(value) {
			let date = new Date(value.value);
			let YYYY = date.getFullYear();
			let MM = String(date.getMonth() + 1).padStart(2, 0);
			let DD = String(date.getDate()).padStart(2, 0);
			this.popupForm.subscribeTime = `${YYYY}-${MM}-${DD}`;
			this.showDate = false;
		},
		getUser() {
			const value = uni.getStorageSync('userInfo') || [];
			if (value.login_user == null) {
				uni.redirectTo({
					url: '/subpages/pages/register/login_province'
				});
				uni.showToast({
					icon: 'none',
					title: '请先登录！'
				});
			} else {
				this.token = value.access_token;
				this.formData.memberId = value.login_user.member.id;
			}
		},
		getCityList() {
			mydata.getDicts('bus_city').then((response) => {
				this.cityArray = response.data;
			});
			mydata.getDicts('bus_need_type').then((response) => {
				this.typeArray = response.data;
			});
			mydata.getDicts('cms_approve_status').then((response) => {
				this.statusList = response.data;
			});
			mydata.getDicts('bus_need_level').then((response) => {
				this.emergencyArray = response.data;
			});
			mydata.getDicts('tzfs').then((response) => {
				this.cooperationArray = response.data;
			});
			mydata.getDicts('sys_yes_no').then((response) => {
				this.yesnoArray = response.data;
			});
			mydata.getDicts('tzfs').then((response) => {
				this.cooperationArray = response.data;
			});
			mydata.getDicts('xmyq').then((response) => {
				this.techlevelArray = response.data;
			});
			mydata.getDicts('cms_industry_type').then((response) => {
				this.industryArray = response.data;
				console.log(this.industryArray);
			});
			mydata.getDicts('ntrzj').then((response) => {
				this.tzArray = response.data;
			});
		},
		selectPics() {
			var that = this;
			uni.chooseImage({
				count: 3,
				success: (res) => {
					const files = res.tempFiles;
					let imgArr = [];
					for (let i = 0; i < files.length; i++) {
						let obj = new Object();
						obj.name = 'photo' + i;
						obj.uri = files[i].path;
						that.fileList.push(obj);
					}
				}
			});
		},
		submitNeeds() {
			// this.formData.cyly = this.industryArray[this.industryIndex].dictValue;
			// this.formData.hzfs = this.cooperationArray[this.cooperatiobnIndex].dictValue;
			// this.formData.jssp = this.techlevelArray[this.techlevelIndex].dictValue;
			// this.formData.sfzs = this.yesnoArray[this.yesnoIndex].dictValue;
			// this.formData.yjtzgm = this.tzArray[this.tzIndex].dictValue;
			if (this.formData.xmmc == '') {
				uni.showToast({
					icon: 'none',
					title: '项目名称不能为空！'
				});
			} else if (this.formData.cyly == '') {
				uni.showToast({
					icon: 'none',
					title: '产业领域不能为空！'
				});
			} else if (this.formData.jssp == '') {
				uni.showToast({
					icon: 'none',
					title: '技术水平不能为空！'
				});
			} else if (this.formData.lxr == '') {
				uni.showToast({
					icon: 'none',
					title: '联系人不能为空！'
				});
			} else if (this.formData.lxrdh == '') {
				uni.showToast({
					icon: 'none',
					title: '联系电话不能为空！'
				});
			} else if (this.formData.yjtzgm == '') {
				uni.showToast({
					icon: 'none',
					title: '投资规模不能为空！'
				});
			} else if (this.formData.cgcyfmc == '') {
				uni.showToast({
					icon: 'none',
					title: '持有方名称不能为空！'
				});
			} else if (this.formData.hzfs == '') {
				uni.showToast({
					icon: 'none',
					title: '合作方式不能为空！'
				});
			} else if (this.formData.cgnrjzms == '') {
				uni.showToast({
					icon: 'none',
					title: '成果内容不能为空！'
				});
			} else {
				uni.showModal({
					title: '提示',
					content: '确认该成果登记信息无误并提交登记吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '提交',
					success: (res) => {
						if (res.confirm) {
							// console.log('comfirm') //点击确定之后执行的代码
							needs.cgzhdj(this.formData).then((res) => {
								this.resData = res.data;
								uni.showToast({
									title: '提交成功！'
								});
								this.submit = false;
							});
						} else {
							console.log('cancel'); //点击取消之后执行的代码
						}
					}
				});
			}
		},
		intelligentMatch() {
			// var needString = 'zyfx=' + this.formData.zyfx + '&serverType=' + this.formData.serverType + '&zc=' + this
			// 	.formData.zc +
			// 	'&education=' + this.formData.education + '&phone=' + this.formData.phone + '&salary=' + this.formData
			// 	.salary +
			// 	'&personName=' + this.formData.personName + '&workYear=' + this.formData.workYear + '&delivery=' + this
			// 	.formData.delivery +
			// 	'&industry=' + this.formData.industry + '&memberId=' + this.formData.memberid + '&xw=' + this.formData
			// 	.xw + '&id=' + this.formData.id
			match.zhcgmatch(this.formData).then((res) => {
				this.matchList = res.data;
				console.log(this.macthList);
			});
		},
		changeDate(e) {
			this.canlendarShow = false;
			var year = e.year;
			var month = e.month;
			if (month < 10) {
				month = '0' + month;
			}
			var day = e.day;
			if (day < 10) {
				day = '0' + month;
			}

			this.formData.deadline = year + '-' + month + '-' + day;
		},
		cooperationChange(e) {
			this.cooperationIndex = e.target.value;
			this.formData.hzfs = this.cooperationArray[this.cooperationIndex].dictValue;
		},
		typeChange(e) {
			this.typeIndex = e.target.value;
			this.formData.type = this.typeArray[this.typeIndex].dictValue;
		},
		cityChange(e) {
			this.cityIndex = e.target.value;
			this.formData.city = this.cityArray[this.cityIndex].dictValue;
		},
		bindDateChange(e) {
			this.formData.deadline = e.detail.value;
			this.date = e.detail.value;
		},
		emergencyChange(e) {
			this.emergencyIndex = e.target.value;
			this.formData.jjcd = this.typeArray[this.typeIndex].dictValue;
		},
		//城果需求发布
		yesnoChange(e) {
			this.yesnoIndex = e.target.value;
		},
		industryChange(e) {
			this.industryIndex = e.target.value;
		},
		tzChange(e) {
			this.tzIndex = e.target.value;
		},
		techlevelChange(e) {
			this.techlevelIndex = e.target.value;
		},
		toggle(item, index) {
			console.log('弹窗');
			this.currentIndex = index;
			this.showMask = true;
		},
		closePopup() {
			// this.$refs['orderpopup'].close();
			this.showMask = false;
		},
		submitOrder() {
			this.orderInfo.subscribeDate = this.date;
			this.orderInfo.serverId = this.machineDetail.id;
			this.orderInfo.serverName = this.machineDetail.insBasic.mInstruCHNName;
			order.addORDER(this.orderInfo).then((res) => {
				if (res.code == '200') {
					uni.navigateTo({
						url: '/subpages/pages/my/orderList/order_list'
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '提交失败，请稍后重试！'
					});
				}
			});
		},
		getMoney(index) {
			var money = '';
			this.tzArray.forEach((v) => {
				if (v.dictValue == index) {
					money = v.dictLabel;
				}
			});
			return money;
		}
	}
};
</script>

<style>
.content {
	height: 500rpx;
	background-color: #e5e5e5;
	padding-bottom: 20rpx;
}

.uni-form-item {
	margin: 60rpx 30rpx;
	border-radius: 50px;
}

.uni-form-item button {
	background-color: #016fb8;
	height: 90rpx;
	font-size: 35rpx;
	margin-top: 50rpx;
}

.login_from_input {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px #eee solid;
	padding: 20upx 0px;
	margin: 0px auto;
	background-color: #fff;
}

.login_from_name {
	width: 30%;
	margin-left: 40rpx;
	font-size: 30rpx;
}
.login_from_fun {
	width: 70%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	text-align: right;
}

.login_from_fun input {
	width: 100%;
	text-align: left;
	font-size: 14px;
}

.detail {
	background-color: #fff;
	margin-top: 25rpx;
	height: 400rpx;
}

.form-left {
	margin-left: 16px;
	padding: 5rpx 0;
}

.form-right {
	margin-top: 6px;
	margin-left: 6px;
	padding: 5px 0;
	width: 90%;
	border: 1px solid #d8d8d8;
	border-radius: 3px;
}

.upLoadImg {
	width: 96rpx;
	height: 96rpx;
	background-color: #ffffff;
	margin-top: 16rpx;
	margin-left: 6px;
}

.devideline {
	float: left;
	height: 0.3rpx;
	width: 100%;
	background-color: #eeeeee;
	margin-top: 25rpx;
	margin-bottom: 15rpx;
}

textarea {
	margin-right: 20rpx;
	height: 300rpx;
	word-wrap: break-word;
	text-align: left;
	font-size: 15px;
}
</style>
